<template>
  <div class="order-tabs">
    <XtxTabs v-model="activeName" @tab-click="handleClick($event)">
      <XtxTabsPane v-for="item in orderStatus" :key="item.name" :label="item.label" :name="item.name"></XtxTabsPane>
    </XtxTabs>
    <div class="order-list" v-if="orderList">
      <!-- 数据加载中 -->
      <div v-if="loading" class="loading"></div>
      <!-- 没有查询的条件没有数据 -->
      <div class="none" v-if="!loading && orderList.length === 0">暂无数据</div>
      <OrderItem v-for="order in orderList" :key="order.id" :order="order" @on-order-cancel="orderCancel"
        @on-order-delete="orderDelete" @on-express="orderExpress" @on-order-confirm="orderConfirm">
      </OrderItem>
    </div>
    <XtxPagination @change-current="changePage($event)" :currentPage="reqParams.page" :pageSize="reqParams.pageSize"
      :total="total" v-if="total > reqParams.pageSize"></XtxPagination>
  </div>
  <!-- 取消订单 -->
  <!-- 对于像：对话框，消息提示，确认提示，通知组件 适合使用传送门 Teleport -->
  <Teleport to="#orderCancel">
    <OrderCancel ref="orderCancelCom"></OrderCancel>
  </Teleport>
  <!-- 查看物流 -->
  <Teleport to="#orderCancel">
    <OrderExpress ref="orderExpressCom"></OrderExpress>
  </Teleport>
</template>

<script>
import { reactive, ref, watch } from 'vue'
import { orderStatus } from '@/api/constants'
import { confirmOrder, deleteOrder, findOrderList } from '@/api/order'
import OrderItem from './components/order-item.vue'
import OrderCancel from './components/order-cancel.vue'
import OrderExpress from './components/order-express.vue'
import Confirm from '@/components/library/Confirm'
import Message from '@/components/library/Message'
export default {
  name: 'OrderList',
  components: {
    OrderItem,
    OrderCancel,
    OrderExpress
  },
  setup() {
    // 默认激活的tab栏
    const activeName = ref('all')
    // 订单的查询条件
    const reqParams = reactive({
      page: 1,
      pageSize: 5,
      orderState: 0
    })
    // 获取订单数据
    const orderList = ref([])
    const total = ref(0)
    const loading = ref(false)
    // 获取订单数据的方法
    const getOrderList = () => {
      // 发送网络请求前显示加载中效果
      loading.value = true
      findOrderList(reqParams).then(data => {
        orderList.value = data.result.items
        total.value = data.result.counts
        // 数据加载完成
        loading.value = false
      })
    }

    // 监听条件的改变
    watch(() => reqParams, () => {
      getOrderList()
    }, { immediate: true, deep: true })

    // 切换tab栏的自定义事件
    const handleClick = ({ index }) => {
      // index刚好和订单状态的数字是一致的
      reqParams.orderState = index
      reqParams.page = 1
    }
    // 改变页码
    const changePage = page => {
      reqParams.page = page
    }
    // 删除订单
    const orderDelete = (order) => {
      Confirm({ text: '您确认删除该条订单吗？' }).then(() => {
        deleteOrder([order.id]).then(() => {
          Message({ type: 'success', text: '删除成功' })
          // 重新查询订单数据
          getOrderList()
        }).catch(err => {
          console.log(err.message)
        })
      })
    }

    return { activeName, orderStatus, orderList, reqParams, handleClick, total, changePage, loading, ...useOrderCancel(), orderDelete, ...useOrderExpress(), ...useOrderConfirm() }
  }
}

// 确认收货
export const useOrderConfirm = () => {
  const orderConfirm = (order) => {
    Confirm({ text: '您确认收到货吗？确认后货款将会打给卖家。' }).then(() => {
      confirmOrder(order.id).then(() => {
        Message({ text: '确认收货成功', type: 'success' })
        // 确认收货后状态变成 待评价
        order.orderState = 4
      })
    })
  }
  return { orderConfirm }
}

// 查看物流
export const useOrderExpress = () => {
  const orderExpressCom = ref(null)
  const orderExpress = (order) => {
    // 获取取消订单的组件对象
    orderExpressCom.value.open(order)
  }
  return {
    orderExpressCom,
    orderExpress
  }
}

// 取消订单
export const useOrderCancel = () => {
  const orderCancelCom = ref(null)
  const orderCancel = (order) => {
    // 获取取消订单的组件对象
    orderCancelCom.value.open(order)
  }
  return {
    orderCancelCom,
    orderCancel
  }
}
</script>

<style lang="less" scoped>
.order-list {
  padding: 20px;
  position: relative;
  min-height: 500px;
  background: #fff;
}

.loading {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(255, 255, 255, .9) url(../../../assets/images/loading.gif) no-repeat center;
}

.none {
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 500px;
  color: #999;
}
</style>